<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ title }} - Speakr</title>
    <link rel="icon" href="{{ url_for('static', filename='img/favicon.svg') }}" type="image/svg+xml">
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <style>
        /* Dark Mode CSS Variables */
        :root {
            /* Light mode variables */
            --bg-primary: #f3f4f6; /* gray-100 */
            --bg-secondary: #ffffff; /* white */
            --bg-tertiary: #f9fafb; /* gray-50 */
            --bg-accent: #dbeafe; /* blue-100 */
            --bg-accent-hover: #bfdbfe; /* blue-200 */
            --bg-button: #2563eb; /* blue-600 */
            --bg-button-hover: #1d4ed8; /* blue-700 */
            --bg-danger: #dc2626; /* red-600 */
            --bg-danger-hover: #b91c1c; /* red-700 */
            --bg-danger-light: #fee2e2; /* red-100 */
            --bg-info-light: #dbeafe; /* blue-100 */
            --bg-warn-light: #fef3c7; /* amber-100 */
            --bg-success-light: #d1fae5; /* green-100 */
            --bg-pending-light: #f5f5f4; /* stone-100 */
            --bg-input: #ffffff; /* white */

            --text-primary: #1f2937; /* gray-800 */
            --text-secondary: #374151; /* gray-700 */
            --text-muted: #6b7280; /* gray-500 */
            --text-light: #9ca3af; /* gray-400 */
            --text-accent: #1d4ed8; /* blue-700 */
            --text-button: #ffffff; /* white */
            --text-danger: #b91c1c; /* red-700 */
            --text-danger-strong: #991b1b; /* red-800 */
            --text-info-strong: #1e40af; /* blue-800 */
            --text-warn-strong: #92400e; /* amber-800 */
            --text-success-strong: #065f46; /* green-800 */
            --text-pending-strong: #44403c; /* stone-700 */

            --border-primary: #e5e7eb; /* gray-200 */
            --border-secondary: #d1d5db; /* gray-300 */
            --border-accent: #93c5fd; /* blue-300 */
            --border-danger: #f87171; /* red-400 */
            --border-focus: #3b82f6; /* blue-500 */
            --ring-focus: #bfdbfe; /* blue-200 */
        }

        .dark {
            /* Dark mode variables */
            --bg-primary: #111827; /* gray-900 */
            --bg-secondary: #1f2937; /* gray-800 */
            --bg-tertiary: #374151; /* gray-700 */
            --bg-accent: #1e3a8a; /* blue-900 */
            --bg-accent-hover: #1e40af; /* blue-800 */
            --bg-button: #2563eb; /* blue-600 */
            --bg-button-hover: #3b82f6; /* blue-500 */
            --bg-danger: #dc2626; /* red-600 */
            --bg-danger-hover: #ef4444; /* red-500 */
            --bg-danger-light: #7f1d1d; /* red-900 */
            --bg-info-light: #1e3a8a; /* blue-900 */
            --bg-warn-light: #78350f; /* amber-900 */
            --bg-success-light: #064e3b; /* green-900 */
            --bg-pending-light: #292524; /* stone-800 */
            --bg-input: #374151; /* gray-700 */

            --text-primary: #f3f4f6; /* gray-100 */
            --text-secondary: #d1d5db; /* gray-300 */
            --text-muted: #9ca3af; /* gray-400 */
            --text-light: #6b7280; /* gray-500 */
            --text-accent: #60a5fa; /* blue-400 */
            --text-button: #ffffff; /* white */
            --text-danger: #f87171; /* red-400 */
            --text-danger-strong: #fca5a5; /* red-300 */
            --text-info-strong: #93c5fd; /* blue-300 */
            --text-warn-strong: #fcd34d; /* amber-300 */
            --text-success-strong: #6ee7b7; /* green-300 */
            --text-pending-strong: #d6d3d1; /* stone-300 */

            --border-primary: #374151; /* gray-700 */
            --border-secondary: #4b5563; /* gray-600 */
            --border-accent: #1d4ed8; /* blue-700 */
            --border-danger: #ef4444; /* red-500 */
            --border-focus: #3b82f6; /* blue-500 */
            --ring-focus: #1e40af; /* blue-800 */
        }

        html {
            background-color: var(--bg-primary); 
            color: var(--text-primary); 
            transition: background-color 0.3s, color 0.3s; 
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
        }
        html, body { height: 100%; margin: 0; }
    </style>
</head>
<body class="bg-[var(--bg-primary)] text-[var(--text-primary)]">
    <div class="container mx-auto px-4 sm:px-6 lg:px-8 py-6 flex flex-col min-h-screen">
        <header class="flex justify-between items-center mb-6 pb-4 border-b border-[var(--border-primary)]">
            <h1 class="text-3xl font-bold text-[var(--text-primary)]">
                <a href="{{ url_for('index') }}" class="flex items-center">
                    <img src="{{ url_for('static', filename='img/favicon.svg') }}" alt="Speakr Logo" class="h-9 w-9 mr-2">
                    Speakr
                </a>
            </h1>
        </header>

        <main class="flex-grow flex items-center justify-center">
            <div class="w-full max-w-md bg-[var(--bg-secondary)] p-8 rounded-xl shadow-lg border border-[var(--border-primary)]">
                <h2 class="text-2xl font-semibold text-[var(--text-primary)] mb-6 text-center">Create an Account</h2>
                
                {% with messages = get_flashed_messages(with_categories=true) %}
                    {% if messages %}
                        {% for category, message in messages %}
                            <div class="mb-4 p-3 rounded-lg {% if category == 'success' %}bg-[var(--bg-success-light)] text-[var(--text-success-strong)]{% elif category == 'danger' %}bg-[var(--bg-danger-light)] text-[var(--text-danger-strong)]{% else %}bg-[var(--bg-info-light)] text-[var(--text-info-strong)]{% endif %}">
                                {{ message }}
                            </div>
                        {% endfor %}
                    {% endif %}
                {% endwith %}
                
                <form method="POST" action="{{ url_for('register') }}">
                    {{ form.hidden_tag() }}
                    
                    <div class="mb-4">
                        {{ form.username.label(class="block text-sm font-medium text-[var(--text-secondary)] mb-1") }}
                        {% if form.username.errors %}
                            {{ form.username(class="mt-1 block w-full rounded-md border-[var(--border-danger)] shadow-sm focus:border-[var(--border-focus)] focus:ring-[var(--ring-focus)] focus:ring-opacity-50 bg-[var(--bg-input)] text-[var(--text-primary)]") }}
                            <div class="text-[var(--text-danger)] text-xs mt-1">
                                {% for error in form.username.errors %}
                                    <span>{{ error }}</span>
                                {% endfor %}
                            </div>
                        {% else %}
                            {{ form.username(class="mt-1 block w-full rounded-md border-[var(--border-secondary)] shadow-sm focus:border-[var(--border-focus)] focus:ring-[var(--ring-focus)] focus:ring-opacity-50 bg-[var(--bg-input)] text-[var(--text-primary)]") }}
                        {% endif %}
                    </div>
                    
                    <div class="mb-4">
                        {{ form.email.label(class="block text-sm font-medium text-[var(--text-secondary)] mb-1") }}
                        {% if form.email.errors %}
                            {{ form.email(class="mt-1 block w-full rounded-md border-[var(--border-danger)] shadow-sm focus:border-[var(--border-focus)] focus:ring-[var(--ring-focus)] focus:ring-opacity-50 bg-[var(--bg-input)] text-[var(--text-primary)]") }}
                            <div class="text-[var(--text-danger)] text-xs mt-1">
                                {% for error in form.email.errors %}
                                    <span>{{ error }}</span>
                                {% endfor %}
                            </div>
                        {% else %}
                            {{ form.email(class="mt-1 block w-full rounded-md border-[var(--border-secondary)] shadow-sm focus:border-[var(--border-focus)] focus:ring-[var(--ring-focus)] focus:ring-opacity-50 bg-[var(--bg-input)] text-[var(--text-primary)]") }}
                        {% endif %}
                    </div>
                    
                    <div class="mb-4">
                        {{ form.password.label(class="block text-sm font-medium text-[var(--text-secondary)] mb-1") }}
                        {% if form.password.errors %}
                            {{ form.password(class="mt-1 block w-full rounded-md border-[var(--border-danger)] shadow-sm focus:border-[var(--border-focus)] focus:ring-[var(--ring-focus)] focus:ring-opacity-50 bg-[var(--bg-input)] text-[var(--text-primary)]") }}
                            <div class="text-[var(--text-danger)] text-xs mt-1">
                                {% for error in form.password.errors %}
                                    <span>{{ error }}</span>
                                {% endfor %}
                            </div>
                        {% else %}
                            {{ form.password(class="mt-1 block w-full rounded-md border-[var(--border-secondary)] shadow-sm focus:border-[var(--border-focus)] focus:ring-[var(--ring-focus)] focus:ring-opacity-50 bg-[var(--bg-input)] text-[var(--text-primary)]") }}
                        {% endif %}
                        <p class="text-xs text-[var(--text-muted)] mt-1">Password must be at least 8 characters long.</p>
                    </div>
                    
                    <div class="mb-6">
                        {{ form.confirm_password.label(class="block text-sm font-medium text-[var(--text-secondary)] mb-1") }}
                        {% if form.confirm_password.errors %}
                            {{ form.confirm_password(class="mt-1 block w-full rounded-md border-[var(--border-danger)] shadow-sm focus:border-[var(--border-focus)] focus:ring-[var(--ring-focus)] focus:ring-opacity-50 bg-[var(--bg-input)] text-[var(--text-primary)]") }}
                            <div class="text-[var(--text-danger)] text-xs mt-1">
                                {% for error in form.confirm_password.errors %}
                                    <span>{{ error }}</span>
                                {% endfor %}
                            </div>
                        {% else %}
                            {{ form.confirm_password(class="mt-1 block w-full rounded-md border-[var(--border-secondary)] shadow-sm focus:border-[var(--border-focus)] focus:ring-[var(--ring-focus)] focus:ring-opacity-50 bg-[var(--bg-input)] text-[var(--text-primary)]") }}
                        {% endif %}
                    </div>
                    
                    <div class="flex flex-col space-y-4">
                        {{ form.submit(class="w-full py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-[var(--text-button)] bg-[var(--bg-button)] hover:bg-[var(--bg-button-hover)] focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-[var(--border-focus)]") }}
                        
                        <div class="text-center text-sm text-[var(--text-muted)]">
                            <span>Already have an account?</span>
                            <a href="{{ url_for('login') }}" class="font-medium text-[var(--text-accent)] hover:underline">Login here</a>
                        </div>
                    </div>
                </form>
            </div>
        </main>

        <footer class="text-center py-4 mt-8 text-xs text-[var(--text-light)] border-t border-[var(--border-primary)]">
            Speakr &copy; {{ now.year }}
        </footer>
    </div>
</body>
</html>
